<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生考勤</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/attendance_detalis.css">
	<link rel="stylesheet" href="css/attendance.css" />
	<link rel="stylesheet" href="css/main.css">

	<style>
		.layui-laydate-content>table {
			width: 100%;
		}

		.layui-laydate-static {
			display: block !important;
		}

		.layui-laydate-main {
			width: auto !important;
		}

		#calendar {
			margin-top: 10px;
		}

		#calendar .layui-laydate .layui-this {
			background-color: inherit !important;
			color: inherit !important;
		}


		.laydate-day-mark::after {
			content: none !important;
		}

		.laydate-day-mark {
			width: 30px !important;
			background-color: green;
			border-radius: 50%;
			right: 0;
			color: white;
			margin: 0 auto !important;
		}

		.calendar-title {
			margin-left: 2vw;
		}

		.calendar-title span {
			font-size: 16px;
			font-weight: bold;
		}

		.calendar-title a span {
			font-size: 14px;
			float: right;
			margin-right: 3vw;
			margin-top: 0.1em;
		}

		.calendar-title a img {
			width: 1.5em;
			height: 1.5em;
			float: right;
		}

		.tips {
			font-size: 12px;
			width: 96%;
			color: silver;
			margin-bottom: 2em;
			word-wrap: break-word;
			word-break: normal;
			margin: 0 2%;
		}

		.card {
			margin: 3vh 0;
		}

		.button {
			width: 140px;
			padding: 5px;
			background-color: green;
			margin-left: calc((100vw - 160px)/2);
			border: none;
			text-align: center;
			display: block;
			color: white !important;
			border-radius: 10px;
			font-size: 16px;
			font-weight: bold;
		}

		#vue-root {
			height: calc(100% - 40px);
			margin: 50px 0 1.5em 0;
		}

		.header {
			z-index: 100;
			position: fixed;
			float: inherit;
			top: 0;
		}
	</style>
</head>

<body>
	<div class="contain">
		<div class="header">
			<div class="header_title">考勤详情</div>
			<a onclick="history.back()">
				<img src="image/return.png" alt="" class="return">
			</a>
		</div>
	</div>
	<div id="vue-root">
		<!-- 学生考勤详情 -->
		<div class="calendar-title"><span>考勤日历:</span>
			<a href="signin_apply.html" v-if="!isTeacher">
				<span>补签</span><img src="image/sign.svg" />
			</a>
		</div>
		<div id="calendar"></div>
		<h3>本月考勤总天数:共<span class="days" v-text="list.length"></span>天</h3>
		<div class="card">
			<a class="button" :href="cardRef">考勤卡管理</a>
		</div>
		<span class="tips">温馨小提示:日历绿色标亮的是当月考勤日，未标亮即当天没有考勤记录</span>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/lib/laydate/laydate.js"></script>

	<script>


		var app = new Vue({
			el: '#vue-root',
			data: {
				studentId: params().id,
				teacherId: params().teacherId,
				isTeacher: isTeacher(),
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				name: null,
				list: [],
				cardRef: (isTeacher() ? 'teacher' : 'student') + '/card.html'
			},
			created: function () {
				if (this.studentId) {
					axios.get('/t/student/' + this.studentId).then(function (res) {
						this.name = res.data.name;
					}.bind(this));
					this.url = '/t/attendance/month/' + this.studentId;
					this.url1 = '/t/punch/month/' + this.studentId;
				} else if (this.teacherId) {
					document.title = '教师考勤';
					axios.get('/t/teacher/' + this.teacherId).then(function (res) {
						this.name = res.data.name;
					}.bind(this));
					this.url = '/t/attendance1/month/' + this.teacherId;
				} else {
					if (this.isTeacher) document.title = '教师考勤';
					else this.url1 = '/s/punch/month';
					this.name = getPerson().name;
					this.url = this.isTeacher ? '/t' : '/s';
					this.url += '/attendance/month';
				}

				this.getData();
			},
			methods: {
				getData: function () {
					var month = this.year + '-' + this.month;
					if (dayjs(month + '-1').isAfter(dayjs())) return;

					var requests = [axios.get(this.url, { params: { month: month } })];

					if (this.url1)
						requests.push(axios.get(this.url1, { params: { month: month } }));

					Promise.all(requests).then(function (results) {
						var res1 = results[0], res2 = results[1];
						var list = res1.data;
						if (res2) list = list.concat(res2.data);
						var mark = {};
						var o = {};
						list.forEach(function (it) {
							o[it] = it;
							mark[month + '-' + it] = '';
						});

						reload(month + '-1', mark);
						this.list = Object.keys(o);
					}.bind(this));
				},
				dayclick: function (o) {
					var len = this.list.filter(function (it) {
						return it == o;
					}.bind(this)).length;
					if (len == 0) {
						alert('当天无考勤记录');
						return;
					}

					location.href = 'attendance_record.html?' + Qs.stringify({
						date: this.year + '-' + this.month + '-' + o,
						studentId: this.studentId,
						teacherId: this.teacherId
					});
				}
			}
		});


		function reload(value, mark) {
			var done = false;
			var div = document.getElementById('layui-laydate1');
			if (div) div.parentNode.removeChild(div);

			laydate.render({
				elem: '#calendar',
				mark: mark,
				showBottom: false,
				position: 'static',
				value: value,
				change: function (value, date) {
					var date = dayjs(value);

					if (done) {
						done = false;
						app.dayclick(date.date());
						return;
					}

					app.year = date.year();
					app.month = date.month() + 1;
					app.getData();
				},
				done: function (value, date, endDate) {
					done = true;
				}
			});

		}

		updateUnread('attendance');

	</script>
</body>

</html>